var gh = 1;
function p(){



        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

                var json = JSON.parse(xmlhttp.responseText);

                for (var  i = 0; i < json.shop.length ; i++){

                    var img = document.createElement('img');
                    img.src = json.shop[i].img;
                    var h4 = document.createElement('h4');
                    h4.innerHTML = json.shop[i].h3;
                    var p = document.createElement('p');
                    p.innerHTML = json.shop[i].p;
                    var p1 = document.createElement('p');
                    var span = document.createElement('span');
                    span.innerHTML = json.shop[i].span;
                    p1.appendChild(span);
                    var del = document.createElement('del');
                    p1.appendChild(del);
                    var span1 = document.createElement('span');
                    del.appendChild(span1);
                    span1.innerHTML = json.shop[i].span1;
                    var div1 = document.createElement("div");
                    div1.appendChild(h4);
                    div1.appendChild(p);
                    div1.appendChild(p1);

                    var div = document.createElement('div');
                    div.appendChild(img);
                    div.appendChild(div1);

                    console.log(div);

                    document.querySelector("#wn").appendChild(div);



                    div1.classList.add("div1");
                    div.classList.add("clearfix","div");
                    h4.classList.add("h3");
                    p.classList.add("p");
                    p1.classList.add("p1");

                }

            }
        };
        xmlhttp.open("GET", gh + ".json",true);
        xmlhttp.send();

}
p();

document.querySelector("#btn").addEventListener('click',function(){

    if (gh >= 4){
        gh = 1;
    }else {
        gh ++;
    }
    document.querySelector('#wn').innerHTML = '';

    p();


});